<!--  -->
<template>
     <div class='mytodo'>
           <!-- 顶部 -->
           <div class="todo-header">
                 <h1>todos</h1>
           </div>
           <!-- 中间 -->
           <div class="todo-min">
                 <!-- 中间的全选和input                  上面输入框-->
                 <div class="todo-min-header">
                       <div :class="['todo-min-btt',{ allchecked: allChecked}]" @click.stop="quanxuan">></div>
                       <input type="text" v-model="inputadd" @keyup.enter="seveTodo" v-focus>
                 </div>
                 <!-- 中间的下拉列                         中间下拉 -->
                 <div class="todo-min-footer">
                       <div class="todo-min-footer-cont" v-for="(item,index) in filterTodos" :key="item.id">
                             <div class="todo-min-footer-chek">
                                                    <!-- 中间选中框 -->
                                   <input type="checkbox" v-model="item.status">
                             </div>
                             <div :class="['todo-min-footer-text',{completed:item.status}]" @dblclick="handelmin(index)">
                                                <!-- 中间下路列表 -->
                                   <span :class="['titie',{hidden:delIndex===index}]">
                                         {{item.text}}
                                   </span>
                                   <input type="text" v-model="item.text" :class="[{hidden:delIndex!==index}]" @blur="seveEditTodo()">
                              </div>
                             <div class="todo-min-footer-del" @click="delTodo(index)">×</div>

                       </div>
                 </div>
           </div>
           <!--                    脚步 -->
           <div class="todo-footer">
                 <div class="todo-footer-header">
                       {{remaining}}个没选中
                 </div>
                 <div class="todo-footer-minshow">
                       <div @click.stop="handleItemClick('all')" :class="['todo-footer-min-one',{active:activeTab==='all'}]">全部</div>
                       <div @click.stop="handleItemClick('active')" :class="['todo-footer-min-two',{active:activeTab==='active'}]">没选中</div>
                       <div @click.stop="handleItemClick('completed')" :class="['todo-footer-min-three',{active:activeTab==='completed'}]">选中的</div>
                 </div>
                 <div class="todo-footer-footer" @click="footerClickAll">清除选中的</div>
           </div>
     </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
      //import引入的组件需要注入到对象中才能使用
components: {},
     data() {
      //这里存放数据
        return {
            headerchek:true,
            activeTab:"all",
            delIndex:-1,  //表示没有编辑 为0表示编辑第0行
            inputadd:"",
            todos:JSON.parse(localStorage.getItem("todos")||"[]")
            // [
            //             {
            //                   text:"大慧",
            //                   status:false,  //这里nn为false  yy为true
            //                   id:1,
            //             },
            //             {
            //                   text:"155",
            //                   status:false,
            //                   id:2,
            //             }
            //       ]
      };
     },
     //监听属性 类似于data概念
     computed: {
           filterTodos:function (){
                 if(this.activeTab==="all"){
                  //      console.log(this.todos)
                  return this.todos;
                }else if(this.activeTab === "active"){
                      return this.todos.filter(v=>{
                  // v.status => false
                  return !v.status;
                  })
                  }else if(this.activeTab === "completed"){
                  return this.todos.filter(v=>{
                  // v.status => true
                  return v.status;
                  })
                  }else{
                        return this.todos
                  }
                 
           },
           //剩下的几项
           remaining:function(){
                 let remainingTodo=this.todos.filter(v=>{
                       if(!v.status){
                             return true;
                       }
                 })
                 return remainingTodo.length;
           },
            allChecked: function () {
            let checked = true;
            // 只要todo 里面有一个 status false => allChecked = false
            if(this.todos.length){
                  this.todos.map((v) => {
                  if (!v.status) checked = false;
                  // console.log(this.todos.length)
                  });
                  
                  return checked;
            }else{
                  return checked=false
            }
            },
     },
      
      //监控data中的数据变化
     watch: {
           todos:{
                 handler:function(newTodos){
                       localStorage.setItem("todos",JSON.stringify(newTodos))
                 }
           }
     },
      //方法集合
     methods: {
           //清除选中的数据
           footerClickAll:function(){
                 let activeTodos= this.todos.filter(v=>{
                       return !v.status;
                 })
                 this.todos=activeTodos;
                 //最后清除localstorage里面的记录
                  // localStorage.removeItem("todos")
           },
           //尾部筛选
           handleItemClick:function(activeTab){
                 this.activeTab=activeTab
           },
      //失焦
      seveEditTodo:function(){
            this.delIndex= -1  
      },
      //双击输入中间的inp
      handelmin:function(index){
            // console.log("111111111")
            this.delIndex=index
      },
      //      删除一行
      delTodo:function(del){
            this.todos.splice(del,1)
      },
           //用饿了么做的一个提示框 
      seveTodo:function(){
            if(!this.inputadd){
                  // alert("输入不能为空")
                  this.$message({
                        message:"输入不能为空！",
                        type:"warning"
                  })
                  return false
            }
            //数组的添加方法  push
            this.todos.push({
                  text:this.inputadd,
                  status:false,
                  id:Date.now()
            })
      
      },
      // 全选
      quanxuan:function(){
            
            //先深拷贝新的一个todos
           let newTodos = JSON.parse(JSON.stringify(this.todos));
           if(this.headerchek){
                  newTodos.map((v)=>{
                  v.status=true;
                  this.headerchek=false
           })   
           }else(                
                 newTodos.map((v)=>{
                  v.status=false;
                  this.headerchek=true
                 })
           )
           this.todos=newTodos;
          
      },
     },
//生命周期 - 创建完成（可以访问当前this实例）
      created() {

       },
//生命周期 - 挂载完成（可以访问DOM元素）
      mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
directives:{
      "focus":{
            inserted:function(el){
                  el.focus();
            }
      }
}
}
</script>
<style lang='less' scoped>
.hidden{
      display: none;
}
.show{
      display: block;
}
.allchecked{
      color: red;
}
div.todo-min-header {
display: flex;
justify-content: center;
margin: 0 auto;
align-items: center;

}
.todo-min-footer {
  .todo-min-footer-cont {
        width: 300px;
        height: 40px;
      //   border: 1px solid black;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;

 
    .completed{
         color: #ddd;
         text-decoration:line-through ; 
    }

    .todo-min-footer-del {
          visibility: hidden;
    }
  }

}
.todo-min-footer-cont:hover{
      .todo-min-footer-del{
            visibility:visible;
      }
}
// 尾部
.todo-footer {
      margin: 0 auto;
      width: 300px;
      height: 30px;
      font-size: 10px;
      align-items: center;
      display: flex;
      justify-content: space-between;

  .todo-footer-minshow {
        display: flex;
        justify-content: center;
        align-items: center;
    .todo-footer-min-one {
          margin: 0px 3px;
    }
      .active{
            border: 1px solid pink;
            background-color: pink;
      }
    .todo-footer-min-two {
          margin: 0px 3px;
    }

    .todo-footer-min-three {
          margin: 0px 3px;
    }
  }

}
</style>